<template>
  <div class="gray-7-bg" style="height: 100vh">
    <f-layout class="page-layout page-table">
      <f-table-plan ref="tablePlanRef" v-bind="gridOptions" v-on="gridEvents">
        <template #toolbar_left>
          <f-input-search
            class="w200"
            placeholder="请输入编码/名称"
          />
        </template>
        <template #toolbar_right>
          <f-button danger class="mr10">删除</f-button>
          <f-button class="mr10" @click="handleOpenTree">次要</f-button>
          <f-button type="primary" class="mr10" @click="handleOpenEdit('add')"
            >新增</f-button
          >
        </template>
      </f-table-plan>
    </f-layout>
  </div>
</template>

<script lang="ts" setup>
import { h, reactive, ref, computed, watch } from "vue";
import { set, get } from "@vueuse/core";
import { http, useTrendsComp } from "../../packages/index";
import * as edit from "./forms.vue";
import * as tree from "./tree.vue";

const tablePlanRef = ref();

const apiServe = (data) =>
  new Promise((resolve, reject) => {
    console.log("apiServe1", data);
    http.post('/base/products/queryInstPage', data)
    // http.get('/cache-service/base-server/region/getListByParentCode', data)
      .then((res) => {
        console.log("apiServe", res);
        resolve(res)
      })
      .catch(() => reject());
  });

const gridOptions = reactive({
  id: 'grid-plan-pure',
  loading: false,
  stripe: false,
  toolbarConfig: {
    // enabled: false,
    search: true,
    searchPlaceholder: '我是搜索描述文本',
    // custom: false,
    title: "我是标题",
  },
  rowConfig: {
    keyField: "productId",
    isCurrent: true,
  },
  checkboxConfig: {
    // labelField: 'name',
    checkMethod: ({ row }) => {
      return row.name === '青霉素G' ? true : false
    }
  },
  forms: [
    { field: "name", label: "名称", value: "123" },
    {
      type: "select",
      field: "bba",
      label: "下拉选项A",
      props: { options: [] },
    },
    { field: "search", label: "搜索框", type: "input-search" },
  ],
  query: (page, form) => apiServe({ ...page, ...form }),
  columns: [
    { type: "checkbox", width: 40 },
    { type: "seq", title: "序", width: 50, fixed: false },
    { field: "name", title: "医师", minWidth: 150, sortable: true, titleSuffix: { message: '啊啊啊啊' } },
    { type: "link", field: "code", width: 100, title: "医院:link" },
    {
      type: "status",
      field: "doseType.code",
      title: "岗位:status",
      width: 100,
      params: [
        { value: "Develop", label: "Develop:开发" },
        { value: "Test", label: "Test:测试" },
        { value: "PM", label: "PM:产品" },
        { value: "Designer", label: "Designer:设计" },
      ],
    },
    { type: "image", field: "minPackUnit", title: "image", width: 80 },
    { type: "money", field: "price", title: "money", width: 80 },
    { type: "status", field: "isShows", title: "status", width: 80 },
    {
      type: "switch",
      field: "isBase",
      title: "switch",
      width: 80,
      params: {
        unCheckedChildren: "A",
        checkedChildren: "B",
        // disabled: (row) => row.isBase,
        events: {
          change: (checked, row) => {
            console.log("change", checked, row);
            // return Promise.resolve();
            return new Promise((resolve) => {
              setTimeout(() => {
                resolve(true);
              }, 1000 * 0.6);
            });
          },
        },
      },
    },
    { type: "whether", field: "isBase", title: "是否", width: 100 },
    {
      type: "operate",
      title: "操作",
      width: 180,
      params: [
        {
          label: "详情",
          // popconfirmTitle: "详情确认？",
          disabled: (row) => row.isBase,
          click: (row) => {
            console.log("详情", row);
            handleOpenTree();
          },
        },
        {
          label: "编辑",
          show: (row) => row.isFeeItem,
          click: (row) => {
            const $grid = get(tablePlanRef);
            if ($grid) {
              console.log("编辑", row);
              handleOpenEdit("edit", row);
            }
          },
        },
        {
          label: "删除",
          popconfirmTitle: "你确认要删除当前数据吗？",
          show: (row) => row.isFeeItem,
          // disabled: (row) => false,
          // power: "c",
          click: (row) => {
            console.log("删除", row);
          },
        },
        {
          label: "操作1",
          popconfirmTitle: "AAAAAAAAA",
          show: (row) => row.isFeeItem,
          disabled: (row) => row.isBase,
        },
        {
          label: "操作操作2",
          disabled: (row) => row.isBase,
          click: (row) => {
            handleOpenEdit("edit", row);
          },
        },
        { label: "操作操作操作3", popconfirmTitle: "CCCCCCCCCCCCCC" },
        { label: "操作操作操作操作4", popconfirmTitle: "DDDDDDDDDDDDDDD" },
      ],
    },
  ],
});

const gridEvents = {
  headerCellClick(params) {
    const { column } = params;
    console.log(`表头单元格点击${column.title}`);
  },
  headerCellDblclick(params) {
    const { column } = params;
    console.log(`表头单元格双击${column.title}`);
  },
  headerCellMenu(params) {
    const { column } = params;
    console.log(`表头右键单元格 ${column.title}`);
  },
  cellClick(params) {
    const { column } = params;
    console.log(`单元格点击${column.title}`);
  },
  cellDblclick(params) {
    const { column } = params;
    console.log(`单元格双击${column.title}`);
  },
  cellMenu(params) {
    const { row } = params;
    console.log(`单元格右键行 ${row.name}`);
  },
  footerCellClick(params) {
    const { column } = params;
    console.log(`表尾单元格点击${column.title}`);
  },
  footerCellDblclick(params) {
    const { column } = params;
    console.log(`表尾单元格双击${column.title}`);
  },
  footerCellMenu(params) {
    const { column } = params;
    console.log(`表尾右键单元格 ${column.title}`);
  },
  checkboxChange(params) {
    console.log(`复选框切换 ${params.checked}`);
  },
  checkboxAll(params) {
    console.log(`复选框全选切换 ${params.checked}`, params);
  },
  toolbarToolClick(code, tool) {
    console.log(`工具栏点击`, code, tool);
  },
  toolbarButtonClick(code, tool) {
    console.log(`工具栏点击`, code, tool);
  },
  formSearch(form) {
    console.log(`搜索条件`, form);
  },
  // scroll (params) {
  //   console.log(`滚动事件scrollTop=${params.scrollTop} scrollLeft=${params.scrollLeft}`)
  // },
  zoom(params) {
    console.log(`表格全屏 type=${params.type}`);
  },
  custom(params) {
    console.log(`表格自定义列 type=${params.type}`);
  },
  proxyQuery(params) {
    console.log(`proxyQuery`, params);
  },
};

const handleOpenTree = () => {
  useTrendsComp({
    type: "modal",
    // type: "drawer",
    title: "tree 详情",
    width: "L",
    buttons: [
      {
        label: "确定1",
        type: "primary",
        click: (data) => {
          console.log("确定1", data);
        },
      },
      {
        label: "取消2",
        type: "default",
        click: (data) => {
          data.cancel();
          console.log("取消2", data);
        },
      },
      { label: "删除3", type: "default", danger: true },
    ],
    component: tree,
    showButton: true,
    showClose: true,
    maskClosable: true,
  }).show();
};

const handleOpenEdit = (type: string, item?: any) => {
  const {
    show: AAA,
    result,
    cancel,
  } = useTrendsComp({
    type: "modal",
    // type: 'drawer',
    // title: '测试标题' + type,
    width: "M",
    height: 500,
    component: edit,
    param: { id: type === "add" ? null : item?.name },
    showButton: true,
    showClose: true,
    maskClosable: true,
  });
  AAA();
  watch(
    () => result.value,
    (data) => {
      console.log("watch:result", data);
    }
  );

  // setTimeout(() => {
  //   const { show: BBB } = useTrendsComp({
  //     type: 'modal',
  //     // type: 'drawer',
  //     // title: '测试标题' + type,
  //     width: "L",
  //     component: edit,
  //     param: { id: type === 'add' ? null : item?.name }
  //   });
  //   BBB().then(data => console.log(data));
  // }, 1000);
};
</script>
